<template>
  <div>
    <div class="box">
      <h3>随机点名系统</h3>
      <p>
        名字是:
        <span>{{ name }}</span>
      </p>
      <div class="btn">
        <!-- 利用v-bind通过vue变量控制标签的disable属性，当数组长度为0代表名字被点完，就禁用两个按钮 -->
        <!-- 由于disable取值为true时按钮会被禁用, 而数组长度为0时, 0代表false, 所以这里需要进行取反操作 -->
        <button @click="getName" :disabled="!arr.length">开始</button>
        <button @click="end" :disabled="!arr.length">结束</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {   // 所有vue变量都要定义在return返回的对象中
      name: "这里显示姓名",
      arr: [
        "刘德华",
        "彭于晏",
        "吴彦祖",
        "梁朝伟",
        "郭富城",
        "张家辉",
        "赵文卓",
        "蔡徐坤",
      ],
      timer: 0,
      num: 0,
    };
  },
  methods: {
    // 开始函数
    getName() {
      clearInterval(this.timer);    // 每次点击开始按钮, 都要关闭上一个定时器, 避免多个定时器重复启动
      this.timer = setInterval(() => {    // 开启定时器
        this.num = Math.floor(Math.random() * this.arr.length);   // 获取随机数
        this.name = this.arr[this.num];   // 得到随机姓名
      }, 200);
    },
    // 结束函数
    end() {
      clearInterval(this.timer);  // 关闭定时器
      this.arr.splice(this.num, 1);  // 从数组中删除被点到的名字
      console.log(this.arr);
      if (this.arr.length === 0)   // 判断, 如果数组为空代表名字被点完了, 弹窗提示
        alert("所有人都被点过啦! 请刷新页面重置系统重新点名哦~");
    },
  },
};
</script>

<style lang="less">
.box {
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-evenly;
  width: 600px;
  height: 300px;
  background-color: #e0e0e0;
  margin: 100px auto;
  h3 {
    font-size: 30px;
  }
  p {
    font-size: 24px;
    span {
      color: red;
    }
  }
  .btn {
    width: 400px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    button {
      width: 100px;
      height: 40px;
      font-size: 20px;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>